<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<head th:include="include :: header"></head>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=93e22b34db78a1c1fd467a663ee7592f&plugin=AMap.ToolBar"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

<style type="text/css">
	#mapContainer{
		margin:0;
		height:100%;
		width:100%;
		font-size:12px;
	}
	.container-div.ui-layout-center.map{
		padding-left: 15px;
		padding-right: 15px;
	}
	button{font-family: "SimSun","Helvetica Neue",Helvetica,Arial;}
	input#keyword {
		width: 110px;
		vertical-align: middle;
		line-height: 24px;
		height: 26px;
		border: 1px solid #bbb;
		padding: 0 4px;
	}
	div#fenYe {
		width: 100%;
		height: 25px;
	}
	input#first {
		margin-left: 45px;
	}
	input.ongImg {
		margin-left: 5px;
	}
	.YN{
		width: 200px;
		height: 50px;
	}
	#s4 hr{
		 width: 100px;
		 height: 5px;
		 float: right;
		 margin: 5px 15px;
		 background-color:black;
	}#s2 hr{
		  width: 100px;
		  height: 5px;
		  float: right;
		  margin: 5px 15px;
		  background-color:#64B464;
	}
</style>
<body class="gray-bg">

	<!--<input id="id" name="id" type="hidden">-->
	<!--<input id="task_id" name="taskId" type="hidden">-->

	<input type="hidden" id="taskId" th:value="*{taskId}"/>
	<input type="hidden" id="lgt_task" th:value="*{lgt_task}"/>
	<input type="hidden" id="lat_task" th:value="*{lat_task}"/>
	<div class="container-div ui-layout-center map">
		<div id="mapContainer" ></div>
		<div class="button-group YN" id='button_group' style='top:15px;bottom:inherit'>

			<!--<input type="button" class="button" value="显示/隐藏交跨"  onclick="Display&HideJcky()"/>-->
			<input type="button" class="button" value="显示/隐藏拉线" onclick="Display_Hide_Pull()"/>
			<input type="button" class="button" value="显示/隐藏档距" onclick="Display_Hide_Span()"/>
			<label id="s4">400v<hr /></label>
			<label id="s2">220v<hr /></label>

		</div>
	</div>


<div th:include="include :: footer"></div>
	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
	<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
    <script th:inline="javascript">
		var byq = null;
        var map = null;

        var lxArray = [];
        var spanArray = [];
        var xlNameArray = [];
        var taskId = $("#taskId").val();
        var lgt_task = $("#lgt_task").val();
        var lat_task = $("#lat_task").val();

        var dataAll;
//        console.log("lgt_task=="+lgt_task)
//        console.log("lat_task=="+lat_task)


        $(function() {
            /**
			 * 	地图同步加载。。
             */
            if(lgt_task != "" && lat_task != ""){
				map = new AMap.Map('mapContainer',{
					expandZoomRange:true,	//	是否支持可以扩展最大缩放级别,和zooms属性配合使用,设置为true的时候，zooms的最大级别在PC上可以扩大到20级
					zoom:20,				//	缩放级别[3,18]
					zooms:[3,20],			//	地图显示的缩放级别范围
					center:[lgt_task,lat_task]	//	根据任务建立坐标中心
				});
			}else{
                map = new AMap.Map('mapContainer',{
                    expandZoomRange:true,	//	是否支持可以扩展最大缩放级别,和zooms属性配合使用,设置为true的时候，zooms的最大级别在PC上可以扩大到20级
                    zoom:20,				//	缩放级别[3,18]
                    zooms:[3,20],			//	地图显示的缩放级别范围
					center:[107.545837,33.222739]	//	洋县
//					center:[104.15154756,30.62610420]	//	万科
                });
			}


            $.ajax({
                cache : true,
                async : false,
                type : "POST",
                url : ctx + "assets/pTask/linePoint",
                data : {
                    "taskId": taskId
                },
                error : function(request) {
                    $.modal.alertError("系统错误");
                },
                success : function(data) {
                    map.clearMap();	//	清除所有覆盖物
                    lxArray.splice(0,lxArray.length)
                    spanArray.splice(0,spanArray.length);
                    xlNameArray.splice(0,xlNameArray.length);
                    dataAll = data;
                    for(var i=0 ; i<data.length;i++){

                        var imgURI = "";
                        if(data[i].type=="杆塔"){
                            imgURI = "/imgs/gt.png"
                        }else if(data[i].type=="变压器"){
                            imgURI = "/imgs/abc.png"
                        }else if(data[i].type=="表箱"){
                            imgURI = "/imgs/bx.png"
                        }else if(data[i].type=="电缆井"){
                            imgURI = "/imgs/dlj.png"
                        }else if(data[i].type=="交叉跨越"){
                            imgURI = "/imgs/jcky.png"
                        }else if (data[i].type == "同杆架设") {
                            imgURI = "/imgs/gt.png"
                        }else if(data[i].type=="分支箱"){
                            imgURI = "/imgs/dlfzx.png"
                        }else if(data[i].type=="下户点"){
                            imgURI = "/imgs/xhd.png"
                        }

                        //	点位描点
                        var marker = null;
//                        if(data[i].type!="同杆架设"){

							if(data[i].type=="变压器"){
								marker = new AMap.Marker({
									position: [data[i].lgt,data[i].lat],//	点位坐标
									offset: new AMap.Pixel(-20, -40),	//	相对偏移量
									icon: new AMap.Icon({				//	显示图标设置
										image: imgURI,
										size: new AMap.Size(60, 60),	//	图片大小
										imageSize: new AMap.Size(60,60)
									}),
									label: {							 //	添加文本标注
										content: data[i].code,			//	点位编号
										offset: new AMap.Pixel(20, -30)
									},
									shape:new AMap.MarkerShape({		//	划定Marker的可点击区域范围
										coords:[0,0,40,40],
										type:'rect'						//	circle:圆形	poly:多边形 rect:矩形
									}),
								});
//							}else{
							}else if(data[i].type != "变压器" && data[i].type == "同杆架设"){
								marker = new AMap.Marker({
									position: [data[i].lgt,data[i].lat],//	点位坐标
									offset: new AMap.Pixel(-20, -40),	//	相对偏移量
									icon: new AMap.Icon({				//	显示图标设置
										image: imgURI,
										size: new AMap.Size(40, 40),	//	图片大小
										imageSize: new AMap.Size(40,40)
									}),
									label: {							 //	添加文本标注
										content: data[i].code,			//	点位编号
										offset: new AMap.Pixel(20, -30)
									},
									shape:new AMap.MarkerShape({		//	划定Marker的可点击区域范围
										coords:[0,0,40,40],
										type:'rect'						//	circle:圆形	poly:多边形 rect:矩形
									}),
								});
							}else if(data[i].type != "变压器" && data[i].type != "同杆架设") {
                                marker = new AMap.Marker({
                                    position: [data[i].lgt, data[i].lat],//	点位坐标
                                    offset: new AMap.Pixel(-20, -40),	//	相对偏移量
                                    icon: new AMap.Icon({				//	显示图标设置
                                        image: imgURI,
                                        size: new AMap.Size(40, 40),	//	图片大小
                                        imageSize: new AMap.Size(40, 40)
                                    }),
                                    label: {							 //	添加文本标注
                                        content: data[i].code,			//	点位编号
                                        offset: new AMap.Pixel(20, -30)
                                    },
                                    shape: new AMap.MarkerShape({		//	划定Marker的可点击区域范围
                                        coords: [0, 0, 40, 40],
                                        type: 'rect'						//	circle:圆形	poly:多边形 rect:矩形
                                    }),
                                });
                            }

							map.add(marker);
							//	点位传送值设置
							marker.extData = {
								id:data[i].id,
								type:data[i].type,
								code:data[i].code,
								byq_id:data[i].byqId,
								line_id:data[i].lineId,
								task_id:data[i].taskId,
								is_pole:data[i].isPole,
								pole_id:data[i].poleId
							};
							marker.on("dblclick",showHtml);
//						}



                        //	连线
//                        if(data[i].lowerId != null){

                        for(var j=0;j<data.length;j++){

//						if(data[i].lowerId == data[j].id && data[j].upId == data[i].id){
                            if(data[j].upId == data[i].id){
                                var path = [
                                    new AMap.LngLat(data[i].lgt,data[i].lat),
                                    new AMap.LngLat(data[j].lgt,data[j].lat)
                                ];
                                var polyline = null;
                                if(data[j].voltage == "400v"){
									polyline = new AMap.Polyline({
										path: path,
										borderWeight: 2, // 线条宽度，默认为 1
										strokeColor: '#000000', // 线条颜色
										lineJoin: 'round' // 折线拐点连接处样式
									});
								}else if(data[j].voltage == "220v"){
                                    polyline = new AMap.Polyline({
                                        path: path,
                                        borderWeight: 2, // 线条宽度，默认为 1
                                        strokeColor: '#64B464', // 线条颜色
                                        lineJoin: 'round' // 折线拐点连接处样式
                                    });
								}else{
                                    polyline = new AMap.Polyline({
                                        path: path,
                                        borderWeight: 2, // 线条宽度，默认为 1
                                        strokeColor: '#C864C8', // 线条颜色
                                        lineJoin: 'round' // 折线拐点连接处样式
                                    });
                                }

                                //	标注档距
                                var text = new AMap.Text({
                                    text:data[j].span,
                                    textAlign:'center', // 'left' 'right', 'center',
                                    verticalAlign:'middle', //middle 、bottom
                                    draggable:false,
                                    cursor:'pointer',
                                    position: [(data[i].lgt+data[j].lgt)/2,(data[i].lat+data[j].lat)/2],
                                    offset: new AMap.Pixel(-10, -10)
                                });

								var xlName = new AMap.Text({
                                    text:data[j].lineName,
                                    textAlign:'center', // 'left' 'right', 'center',
                                    verticalAlign:'middle', //middle 、bottom
                                    draggable:false,
                                    cursor:'pointer',
                                    position: [(data[i].lgt+data[j].lgt)/2,(data[i].lat+data[j].lat)/2],
                                    offset: new AMap.Pixel(-10, -10)
                                });
                                map.add(polyline);
                                map.add(text);
                                spanArray.push(text);
                                xlNameArray.push(xlName);
                            }


                        }
//						}

                    }

                    //	拉线描点
                    for(var k=0 ; k<data.length;k++){
                        if(data[k].pullNum !=null){
                            if(data[k].pullNum > 0){
                                var marker_pull = new AMap.Marker({
                                    position: [data[k].lxLgt,data[k].lxLat],//	点位坐标
                                    offset: new AMap.Pixel(-20, -40),	//	相对偏移量
                                    icon: new AMap.Icon({				//	显示图标设置
                                        image: "/imgs/lx.png",
                                        size: new AMap.Size(40, 40),	//	图片大小
                                        imageSize: new AMap.Size(40,40)
                                    }),
                                });
                                map.add(marker_pull);
                                lxArray.push(marker_pull);
                            }
                        }
                    }

                }
            });



        });


        /**
		 * 	隐藏拉线
		 */
        var lx = 0;
		function Display_Hide_Pull() {
            if(lx % 2 == 0){
                map.remove(lxArray);
                map.setFitView();
                map.setZoom(20);
			}else{
                map.add(lxArray);
                map.setFitView();
                map.setZoom(20);
			}
			lx++;
        }

        /**
		 * 	隐藏/显示档距
		 */
        var dj = 0;
		function Display_Hide_Span() {

            if(dj % 2 == 0){
                console.log("隐藏档距")
                map.remove(spanArray);
                map.add(xlNameArray);
                map.setFitView();
                map.setZoom(20);

			}else{
                console.log("显示档距")
                map.remove(xlNameArray);
                map.add(spanArray);
                map.setFitView();
                map.setZoom(20);

			}
			dj++;
        }

        /**
		 * 	点位点击事件
		 */
        function showHtml(e) {

			var id = e.target.extData.id;
			var type = e.target.extData.type;
			var taskId = e.target.extData.task_id;
			var isPole = e.target.extData.is_pole;
			var poleId = e.target.extData.pole_id;
			var byqId = e.target.extData.byq_id;

            console.log("任务点击点位的类型===》》》"+type)

			var url = "";
			if(type=="杆塔" && isPole=="否"){
			    url = ctx+'assets/pTask/showGt/'+id+"/"+taskId;
				createMenuItem(url,type+'详情')
			} else if(type=="变压器"){
                url = ctx+'assets/pTask/showByq/'+id+"/"+taskId;
                createMenuItem(url,type+'详情')
            }else if(type=="分支箱"){
                url = ctx+'assets/pTask/showFzx/'+id+"/"+taskId;
                createMenuItem(url,type+'详情')
            }else if(type=="下户点"){
                url = ctx+'assets/pTask/showXhd/'+id+"/"+taskId;
                createMenuItem(url,type+'详情')
            }else if(type=="电缆井"){
                url = ctx+'assets/pTask/showDlj/'+id+"/"+taskId;
                createMenuItem(url,type+'详情')
            }else if(type=="表箱"){
                url = ctx+'assets/pTask/showBx/'+id+"/"+taskId;
                createMenuItem(url,type+'详情')
            }else if(type=="交叉跨越"){
                url = ctx+'assets/pTask/showJcky/'+id+"/"+taskId;
                createMenuItem(url,type+'详情')
            }else if(type=="杆塔" && isPole=="是"){
                layer.open({
                    type: 2,
                    title: '同杆架设点位选择',
                    area: ['950px', '340px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: ctx+"assets/pPoint/choosePole?id="+id+"&taskId="+taskId+"&isPole="+isPole+"&poleId="+poleId+"&byqId="+byqId+"&type="+type,
                    btn: ['确定', '关闭'],
                    // 弹层外区域关闭
                    shadeClose: true,
                    yes: function (index,layero) {
                        var body = layer.getChildFrame('body', index);//得到iframe页的body内容
//                        $("#id").val(body.find('#id').val());
//                        $("#task_id").val(body.find('#task_id').val());
						id = body.find('#id').val();
                        taskId = body.find('#task_id').val();
                        url = ctx+'assets/pTask/showGt/'+id+"/"+taskId;
                        createMenuItem(url,type+'详情')

                        layer.close(index);

                    },
                    cancel: function(index) {
                        return true;
                    }
                });

            }else if(type=="同杆架设" && isPole=="是"){
                layer.open({
                    type: 2,
                    title: '同杆架设点位选择',
                    area: ['950px', '340px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: ctx+"assets/pPoint/choosePole?id="+id+"&taskId="+taskId+"&isPole="+isPole+"&poleId="+poleId+"&byqId="+byqId+"&type="+type,
                    btn: ['确定', '关闭'],
                    // 弹层外区域关闭
                    shadeClose: true,
                    yes: function (index,layero) {
                        var body = layer.getChildFrame('body', index);//得到iframe页的body内容
//                        $("#id").val(body.find('#id').val());
//                        $("#task_id").val(body.find('#task_id').val());

						id = body.find('#id').val();
                        taskId = body.find('#task_id').val();
                        url = ctx+'assets/pTask/showGt/'+id+"/"+taskId;
                        createMenuItem(url,type+'详情')

                        layer.close(index);

                    },
                    cancel: function(index) {
                        return true;
                    }
                });

            }


        }


	</script>
</body>
</html>